<template>
  <div class="about-container">
    <div class="company-info">
      <h1>关于我们</h1>
      <div class="company-content">
        <p class="company-desc">
          匠觉品牌事务所专注于餐饮空间设计领域，致力于为客户打造独具特色的餐饮空间体验。
          我们的设计团队拥有丰富的餐饮空间设计经验，深谙餐饮环境对品牌价值的重要性。
        </p>
        <p class="company-desc">
          从高端餐厅到特色小馆，从概念设计到施工落地，我们为每一个项目注入独特的设计灵魂，
          让空间讲述品牌故事，为顾客创造难忘的用餐体验。
        </p>
      </div>
    </div>
    
    <div class="map-section">
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索地址"
          class="search-input"
          @keyup.enter="handleSearch">
          <template #append>
            <el-button @click="handleSearch">搜索</el-button>
          </template>
        </el-input>
      </div>
      <div class="map-container" ref="mapContainer"></div>
      <div class="location-info">
        <h3>公司地址</h3>
        <p>苏州工业园区星汉街5号B1幢</p>
        <p>联系电话：0512-XXXXXXXX</p>
        <p>营业时间：周一至周五 9:00-18:00</p>
        <el-button type="primary" @click="handleNavigate">导航到这里</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'About',
  data() {
    return {
      map: null,
      searchKeyword: '',
      placeSearch: null,
      marker: null,
      companyPosition: [120.668108, 31.315438]
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    async initMap() {
      try {
        const AMap = await AMapLoader.load({
          key: '8486280fb4eb79359cee737a5bc73bde',
          version: '2.0',
          plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete']
        })
        
        this.map = new AMap.Map(this.$refs.mapContainer, {
          zoom: 15,
          center: this.companyPosition
        })
        
        // 添加标记点
        this.marker = new AMap.Marker({
          position: this.companyPosition,
          title: '匠觉品牌事务所'
        })
        
        // 创建信息窗体
        const infoWindow = new AMap.InfoWindow({
          content: `
            <div class="info-window">
              <h4>匠觉品牌事务所</h4>
              <p>专业的餐饮空间设计服务</p>
              <p>地址：苏州工业园区星汉街5号B1幢</p>
              <p>电话：0512-XXXXXXXX</p>
            </div>
          `,
          offset: new AMap.Pixel(0, -30)
        })
        
        this.map.add(this.marker)
        infoWindow.open(this.map, this.companyPosition)
        
        // 添加工具条和比例尺
        this.map.addControl(new AMap.ToolBar())
        this.map.addControl(new AMap.Scale())
        
        // 初始化搜索服务
        this.placeSearch = new AMap.PlaceSearch({
          map: this.map
        })
      } catch (e) {
        console.error('地图加载失败：', e)
      }
    },
    
    handleSearch() {
      if (this.searchKeyword.trim()) {
        this.placeSearch.search(this.searchKeyword)
      }
    },
    
    handleNavigate() {
      window.open(`https://uri.amap.com/navigation?to=${this.companyPosition[0]},${this.companyPosition[1]},匠觉品牌事务所&mode=car&policy=1`)
    }
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>

<style scoped>
.about-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.company-info {
  margin-bottom: 40px;
}

.company-desc {
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
  font-size: 16px;
}

.map-section {
  position: relative;
  margin-top: 30px;
}

.search-box {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  width: 300px;
}

.map-container {
  width: 100%;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.location-info {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-top: 20px;
}

.location-info h3 {
  margin-bottom: 15px;
  color: #333;
}

.location-info p {
  margin: 10px 0;
  color: #666;
}

:deep(.info-window) {
  padding: 10px;
  
  h4 {
    margin: 0 0 10px 0;
    color: #333;
  }
  
  p {
    margin: 5px 0;
    color: #666;
  }
}
</style> 